<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建10个a标签</title>
</head>

<body>
    <h2>创建10个a标签</h2>
    <p>
        i的值，如果是全局作用域下的i,那么每次弹出的都是循环的最后一个i
    </p>
    <p>所以i的值，必须是快级作用域下的i 正好用es6中的let 来声明变量i</p>
    <script>
        // var i, a
        for (let i = 1; i <= 10; i++) {
            let a = document.createElement('a')
            a.innerHTML = i + '<br>'
            document.body.appendChild(a)
            a.addEventListener('click', function(e) {
                e.preventDefault()
                alert(i)
            })
        }
        for (var i = 0; i < 10; i++) {
            var a = document.createElement('a')
            a.innerHTML = i + '<br>'
            a.addEventListener('click', function(e) {
                e.preventDefault()
                alert(i)
            })
            document.body.appendChild(a)
        }

        // var i, a
        // for (i = 0; i < 10; i++) {
        //     (function(i) {
        //         a = document.createElement('a')
        //         a.innerHTML = i + '<br>'
        //         a.addEventListener('click', function(e) {
        //             e.preventDefault()
        //             alert(i)
        //         })
        //         document.body.appendChild(a)
        //     })(i)
        // }
    </script>
</body>

</html>